<!--
 * @Description: 
 * @Author: baron
 * @Date: 2025-04-15 13:28:27
 * @LastEditTime: 2025-04-17 14:37:34
 * @LastEditors: baron
-->
<template>
    <view class="home-container">
        <!-- 1. 顶部搜索栏 -->
        <view class="header">
            <view class="logo">飞手社区</view>
            <view class="search-box" @tap="goToSearchPage">
                <uni-icons type="search" size="18" color="#999"></uni-icons>
                <text class="placeholder">搜索课程、机</text>
            </view>
            <view class="message-box">
                <uni-icons type="chatbubble-filled" size="24" color="#666"></uni-icons> 
                <view class="badge" v-if="messageCount > 0">{{ messageCount > 9 ? '9+' : messageCount }}</view>
            </view>
        </view>

        <!-- 内容区域 -->
        <scroll-view scroll-y class="content-scroll">
            <!-- 占位，防止内容被顶部栏遮挡 -->
            <view class="header-placeholder"></view>

            <!-- 2. 轮播图 -->
            <swiper class="banner-swiper" indicator-dots circular autoplay :interval="3000" :duration="500">
                <swiper-item v-for="(item, index) in bannerList" :key="index">
                    <image :src="item.image" mode="aspectFill" class="banner-image"></image>
                </swiper-item>
            </swiper>

            <!-- 3. 功能图标网格 -->
            <view class="grid-section">
                <uni-grid :column="4" :showBorder="false" :square="false">
                    <uni-grid-item v-for="(item, index) in gridList.slice(0, 8)" :key="index" @tap="gridItemClick(item)">
                        <view class="grid-item-box">
                            <image :src="item.icon" class="grid-icon"></image>
                            <text class="grid-text">{{ item.text }}</text>
                        </view>
                    </uni-grid-item>
                </uni-grid>
            </view>

            <!-- 4. 精选课程推荐 -->
            <view class="course-section">
                <view class="section-header">
                    <text class="title">精选课程推荐</text>
                </view>
                <view class="course-list">
                    <view class="course-item" v-for="(course, index) in courseList" :key="index" @tap="goToCourseDetail(course)">
                        <image :src="course.image" mode="aspectFill" class="course-image"></image>
                        <view class="course-info">
                            <text class="course-title">{{ course.title }}</text>
                            <text class="course-desc">{{ course.description }}</text>
                            <view class="course-footer">
                                <text class="price">¥{{ course.price }}</text>
                                <text class="enrolled">已报名 {{ course.registeredCount }}人</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>

        <!-- 5. 客服悬浮按钮 -->
        <uni-fab
            ref="fab"
            horizontal="right"
            vertical="bottom"
            :pattern="fabPattern"
            @fabClick="fabClick"
        />
    </view>
</template>

<script>
import { hasLogin } from '@/utils/login';
export default {
    data() {
        return {
            messageCount: 3,
            bannerList: [
                { image: '/static/images/banner/banner1.jpg' },
                { image: '/static/images/banner/banner2.jpg' },
                { image: '/static/images/banner/banner3.jpg' }
            ],
            gridList: [
                { icon: '/static/images/grid/jigou.png', text: '机构入驻', link: '' },
                { icon: '/static/images/grid/qiye.png', text: '企业入驻', link: '' },
                { icon: '/static/images/grid/renzheng.png', text: '飞手认证', link: '' },
                { icon: '/static/images/grid/peixun.png', text: '培训课程', link: '' },
                { icon: '/static/images/grid/zixun.png', text: '行业资讯', link: '/pages/news/index' },
                { icon: '/static/images/grid/zhaopin.png', text: '招聘服务', link: '' },
                { icon: '/static/images/grid/xiangmu.png', text: '项目招聘', link: '' },
                { icon: '/static/images/grid/shequ.png', text: '飞手社区', link: '' }
            ],
            courseList: [
                {
                    id: 1,
                    image: '/static/images/courses/course1.jpg',
                    title: '无人机基础培训课程',
                    description: '零基础入门，系统学习无人机操作',
                    price: 2980,
                    registeredCount: 128
                },
                {
                    id: 2,
                    image: '/static/images/courses/course2.jpg',
                    title: '无人机航拍高级技巧',
                    description: '掌握专业航拍运镜与后期处理',
                    price: 4800,
                    registeredCount: 95
                }
            ],
            fabPattern: { // FAB 按钮样式 - 绿色背景白色图标
                backgroundColor: '#11D183',
                icon: 'headphones', // 使用内置客服图标
                iconColor: '#fff'
            },
        }
    },
    async onLoad() {
        try {
            await hasLogin();
        } catch (error) {
            console.log('error---', error);
        }
    },
    methods: {
        goToSearchPage() {
            // uni.navigateTo({
            //  url: '/pages/search/index'
            // })
            uni.showToast({title: '跳转搜索页', icon:'none'});
        },
        gridItemClick(item) {
            if (item.link) {
                uni.navigateTo({
                    url: item.link
                })
            } else {
                uni.showToast({
                    title: '功能开发中',
                    icon: 'none'
                })
            }
        },
        goToCourseDetail(course) {
            // uni.navigateTo({
            //  url: `/pages/course/detail?id=${course.id}`
            // })
            uni.showToast({title: '课程ID: ' + course.id, icon:'none'});
        },
        fabClick() {
            uni.showToast({ title: '联系客服', icon: 'none' });
            // 执行客服相关操作
        }
    }
}
</script>

<style lang="scss">
.home-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;

    /* 顶部搜索栏 */
    .header {
        background-color: #fff;
        padding: 15rpx 30rpx;
        padding-top: var(--status-bar-height); // 适配状态栏
        display: flex;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        height: 90rpx; // 固定高度

        .logo {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
            margin-right: 20rpx;
        }

        .search-box {
            flex: 1;
            height: 64rpx;
            background-color: #f5f5f5;
            border-radius: 32rpx;
            display: flex;
            align-items: center;
            padding: 0 25rpx;

            .placeholder {
                color: #999;
                font-size: 26rpx;
                margin-left: 10rpx;
            }
        }

        .message-box {
            margin-left: 25rpx;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50rpx;
            height: 50rpx;

            .badge {
                position: absolute;
                top: 0rpx;
                right: -5rpx;
                background-color: #ff4d4f;
                color: #fff;
                font-size: 18rpx;
                min-width: 28rpx;
                height: 28rpx;
                line-height: 28rpx;
                text-align: center;
                border-radius: 14rpx;
                padding: 0 6rpx;
            }
        }
    }

    /* 内容滚动区域 */
    .content-scroll {
        flex: 1;
        height: 0; // 配合 flex:1 实现高度自适应
        width: 100%;
        background-color: #f5f5f5;
    }

    .header-placeholder {
        height: calc(90rpx + var(--status-bar-height)); // 顶部栏固定后的占位高度
    }

    /* 轮播图 */
    .banner-swiper {
        height: 300rpx;
        margin: 20rpx 20rpx 0;
        border-radius: 12rpx;
        overflow: hidden; // 确保图片圆角生效

        .banner-image {
            width: 100%;
            height: 100%;
        }
        // 轮播图指示点样式调整
        ::v-deep .uni-swiper-dots-horizontal {
             bottom: 15rpx;
        }
        ::v-deep .uni-swiper-dot {
            width: 12rpx;
            height: 12rpx;
            background-color: rgba(255, 255, 255, 0.5);
        }
        ::v-deep .uni-swiper-dot-active {
            background-color: #fff;
        }
    }

    /* 功能图标网格 */
    .grid-section {
        background-color: #fff;
        margin: 20rpx;
        border-radius: 12rpx;
        padding: 20rpx 0;

        .grid-item-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 15rpx 0;

            .grid-icon {
                width: 80rpx;
                height: 80rpx;
                margin-bottom: 10rpx;
            }

            .grid-text {
                font-size: 24rpx;
                color: #333;
            }
        }
    }

    /* 课程推荐 */
    .course-section {
        margin: 20rpx;
        background-color: #fff;
        border-radius: 12rpx;
        padding: 30rpx 20rpx;

        .section-header {
            margin-bottom: 30rpx;

            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }
        }

        .course-list {
            .course-item {
                margin-bottom: 30rpx;

                &:last-child {
                    margin-bottom: 0;
                }

                .course-image {
                    width: 100%;
                    height: 320rpx;
                    border-radius: 12rpx;
                    background-color: #eee; // 图片加载前的占位符颜色
                }

                .course-info {
                    padding-top: 20rpx;

                    .course-title {
                        font-size: 30rpx;
                        font-weight: 500;
                        color: #333;
                        margin-bottom: 10rpx;
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .course-desc {
                        font-size: 24rpx;
                        color: #666;
                        margin-bottom: 20rpx;
                        display: block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .course-footer {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .price {
                            font-size: 32rpx;
                            color: #ff4d4f;
                            font-weight: bold;
                        }

                        .enrolled {
                            font-size: 24rpx;
                            color: #999;
                        }
                    }
                }
            }
        }
    }
    
    /* 悬浮按钮微调 */
    ::v-deep .uni-fab__circle--rightBottom {
        bottom: calc(env(safe-area-inset-bottom) + 30rpx) !important;
    }
}
</style>
